<template>
  <div class="font_form">
    <el-divider> 基本样式 </el-divider>
    <el-form ref="formRef" :model="compData" label-width="80px">
      <el-form-item label="位置:">
        <el-input-number
          class="a_input"
          v-model="compData.x"
          :controls="false"
          :precision="0"
          :step="1"
        />
        <el-input-number
          class="a_input"
          v-model="compData.y"
          :controls="false"
          :precision="0"
          :step="1"
        />
      </el-form-item>
      <el-form-item label="大小:">
        <el-input-number
          class="a_input"
          v-model="compData.width"
          :controls="false"
          :precision="0"
          :step="1"
        />
        <el-input-number
          class="a_input"
          v-model="compData.height"
          :controls="false"
          :precision="0"
          :step="1"
        />
      </el-form-item>
      <el-form-item label="文本内容:">
        <el-input type="textarea" v-model="compData.text" />
      </el-form-item>
      <el-form-item label="字体样式:">
        <el-select
          v-model="compData.fontStyle"
          placeholder="Select"
          size="large"
        >
          <el-option
            v-for="item in fontStyleOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="字体粗细:">
        <el-select
          v-model="compData.fontWeight"
          placeholder="Select"
          size="large"
        >
          <el-option
            v-for="item in fontWeightOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="字体大小:">
        <el-input-number
          v-model="compData.fontSize"
          :controls="false"
          :precision="0"
          :step="1"
        />
      </el-form-item>
      <el-form-item label="字体系列:">
        <el-input v-model="compData.fontFamily" />
      </el-form-item>

      <fill-style :compData="compData"></fill-style>
      <StrockStyle :compData="compData"></StrockStyle>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import FillStyle from './FillStyle.vue'
import StrockStyle from './StrokeStyle.vue'
import { fontStyleOptions, fontWeightOptions } from '@/config/canvas'

const props = defineProps({
  compData: {
    type: Object,
    default: {},
  },
})
</script>
<style lang="scss" scoped></style>
